<template xmlns:v-clipboard="http://www.w3.org/1999/xhtml">
  <div class="vote">
    <div class="vote-title">
      <router-link to="/"><span> &lt;{{$t("m.home")}}</span></router-link>
      <router-link to="/account"><span> &lt;{{$t("ac.account")}}</span></router-link>
      <router-link to="/account/vote">  <span>&lt;{{$t("vo.datxWallet")}}</span></router-link>

      {{$t("vo.voteTitle")}}
    </div>
    <div class="vote-header flex">
      <div class="flex">
        <div class="nav">
          <span>{{$t("vo.myDatx")}}</span><br>
          <span>{{allDatx}}</span>
        </div>
        <div class="nav">
          <span>{{$t("vo.redeemDatx")}}</span><br>
          <span>{{resource.totalResource}}</span>
        </div>
      </div>
      <div style="flex:1;"></div>
      <div class="navbut"><button @click="voteAdd">{{$t("vo.vote")}}</button></div>
    </div>
    <div class="table">
      <div class="table-title">{{$t("vo.voteDetail")}}</div>
      <el-table
        :data="tab"
        style="width: 100%">
        <el-table-column
          prop=""
          label=""
          width="20">
        </el-table-column>
        <el-table-column
          prop=""
          :label="this.$t('vo.type')"
         >
          <template slot-scope="scoped">
            <span>{{scoped.$index+1+pageSize*(pageNum-1)}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="owner"
          :label="this.$t('vo.name')"
         >
        </el-table-column>
        <el-table-column
          prop="total_votes"
          :label="this.$t('vo.piaosu')"
         >
          <template slot-scope="scope">
            <span>{{parseInt(scope.row.total_votes)}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="is_active"
          :label="this.$t('vo.rate')"
          align="center">
          <template slot-scope="scope">
            <span>{{(parseInt(scope.row.total_votes)*100/numAll).toFixed(3)}}%</span>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          :label="this.$t('vo.op')"
          width=""
         align="center">
          <template slot-scope="scoped">
            <!--<el-checkbox v-if="scoped.row.is_active==1" v-model="checked" disabled>已投</el-checkbox>-->
            <i v-if="scoped.row.is_active==1" class="el-icon-success"></i>
            <el-checkbox  v-if="scoped.row.is_active==0"  v-model="scoped.row.checkState" size="medium" @change="changeCheck(scoped.row.checkState,scoped.$index)"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          label=""
          width="20">
        </el-table-column>
      </el-table>

    </div>
    <div class="frame">
      <el-dialog
        :title="this.$t('dt.verificationPassword')"
        :visible.sync="dialogVisible"
        width="440px"
      >
        <div  class="password">
          <p>{{$t("dt.password")}}</p>
          <input type="password"  :placeholder="this.$t('dt.passwordPlaceholder')" v-model="secret">
          <button @click="confirm">{{$t("dt.submiit")}}</button>
        </div>
      </el-dialog>
    </div>
    <div>
      <div class="foot">
        <el-pagination
          prev-text="上一页"
          next-text="下一页"
          layout="prev, pager, next"
          :total=total
          :page-size=pageSize
          @current-change="changePage">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  import {getResource, getTokenBalance,getVote,getVoteState} from '../../api/chainApi'
  import {vote,selectOuterDatx} from '../../service/datxService'
  import {validateSecret} from '../../utils/commonUtils'
  export default{
    components:{
    },
    data(){
      return{
        checked:true,
        voteState:[],
        tableData:[
        ],
        stct:1,
        stcf:0,
        datxDetail:'',
        resource: {
          totalResource: "0 DATX",	//已质押资源
          cpuResource: "0 DATX",		//CPU
          cpuUsed: "0 ms",		//cpu资源已用
          cpuTotal: "0 ms",		//cpu资源总量
          netResource: "0 DATX",		//NET
          netUsed: "0 KB",		//net资源已用
          netTotal: "0 KB",		//net资源总量
          ramResource: "0 DATX",		//RAM
          ramUsed: "0 KB",			//ram资源已用
          ramTotal: "0 KB"		//ram资源总量
        },
        secret:'',
        allDatx:'',
        dialogVisible:false,
        numAll:0,
        total:50,
        pageSize:5,
        pageNum:1,
        tab:[]
      }
    },
    created() {
      this.datxDetail = JSON.parse(window.sessionStorage.getItem("walletdetail"))
      getResource(this.datxDetail.name).then(res => {
        this.resource = res.data;
      });
      getTokenBalance('DATX', this.datxDetail.name).then(res => {
        this.allDatx=res.data.balance;
      })
      this.getlist()
    },
    mounted(){

    },
    methods:{
      // 投票
      voteAdd(){
        this.dialogVisible=true;
      },
      confirm(){
        if(validateSecret(this.secret)){
          let prods=[];
          let account='alice';
          this.tableData.forEach(item=>{
            if(item.checkState==1){
              prods.push(item.producer_key)
            }
          })
          if(!prods.length==0){
            let obj=selectOuterDatx(this.datxDetail.name,this.secret)
            let privateKey=obj.privateKey;
            if(privateKey){
              console.log(account,prods,privateKey)
              vote(account,prods,privateKey,(erro,state) =>{
                console.log(erro,state)
                if(!erro){
                  this.$message.error(this.$t('vo.voteSuccess'))
                  this.dialogVisible=false;
                }else {
                  this.$message.error(this.$t('vo.voteFail'))
                  this.dialogVisible=false;
                }
              })
            }else {
              this.$message.error(this.$t('dt.privatekeyNoExist'))
            }
          }else {
            this.$message.error(this.$t('vo.voteChance'))
          }

        }else {
          this.$message.error(this.$t('dt.passwordDefaule'))
        }
      },
      
      getlist(){
        getVoteState("alice").then(res=>{
          if(res.code==200){
            this.voteState=res.data.producers
          }else {
            this.$message.error(res.message)
          }
        })
        getVote().then(res=>{
          if(res.code==200){
            this.tableData=res.data;
            this.total= this.tableData.length
            this.tab=this.tableData.slice(0+this.pageSize*(this.pageNum-1),this.pageSize+this.pageSize*(this.pageNum-1));
            console.log(this.tab)
            this.tableData.forEach(item=>{
              this.numAll+=Number(item.total_votes)
            })
            let arry=this.voteState
            this.tableData.checkState=false
          }else {
            this.$message.error(res.message)
          }
        })
      },

      changeCheck(val,index){
        this.tableData[index].checkState=val
      },

      changePage(val){
        this.pageNum=val;
        this.getlist()
      }

    }
  }
</script>
<style lang="less" scoped>
.vote{
  .flex{
    display: flex;
  }
  &-title{
    color: rgba(0,0,0,0.6);
    font-size: 30px;
    padding: 20px 0;
    // line-height: 60px;
    display: flex;
    align-items: center;
    span{
      color: #000000;
      font-size: 16px;
      margin-right: 10px;
      line-height: 47px;
    }
  }
  &-header{
    margin-bottom: 20px;
    padding: 10px;
    background: #fff;
    min-height: 6px;
    font-size: 20px;
    .nav{
      min-width: 180px;
       padding: 0 20px;
      span{
        display: inline-block;
        padding: 10px 0;
      }
      span:last-child{
        font-size: 18px;
      }
    }
    .navbut{
      padding: 0 20px;
      margin: 15px;
      // 按键样式
      button {
        color: #fff;
        width: 60px;
        border-radius: 4px;
        line-height: 32px;
        text-align: center;
        background-color: #98889b;
        outline: none;
        border: none;
        cursor: pointer;
      }
      button:hover {
        opacity: .8;
      }
    }
    .nav:first-child{
      border-right: 1px solid #eaedf5;
    }
  }
  .table {
    background: #fff;
    .table-title{
      padding: 20px 28px;
      font-size: 22px;
    }
    img {
      width: 28px;
      height: 28px;
      margin-bottom: -9px
    }
    span {
      line-height: 32px;
    }
  }
  .password{
    padding: 0 20px;
    p{
      color: #666666;
      padding:15px 0;
    }
    input{
      width: 100%;
      height: 34px;
      padding: 0 10px;
      border-radius: 4px;
      border: solid 1px #eeeeee;
      background-color: #ffffff;
    }
    input::-webkit-input-placeholder {
      font-size: 12px;
      color: #c5c7cb;
    }
    button{
      width: 100%;
      margin: 30px 0 10px;
      color: #fff;
      border-radius:4px;
      text-align: center;
      line-height:40px;
      background: #98889b;
      outline: none;
      cursor: pointer;
    }
    button:hover{
      opacity: .8;
    }
    div{
      margin: 0px;
      p{
        padding: 5px 0;
        text-align: center;
      }
      span{
        font-size: 12px;
        color: #98889b;
      }
    }
  }
  .foot{
    background: #fff;
    padding: 10px ;
    text-align: right;
  }
}
</style>
<style lang="less">
  .vote{
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
      background-color: #98889b;
      border-color: #98889b;
    }
    .el-checkbox__inner:hover{
      border-color: #98889b;
    }
    .el-table__body-wrapper {
      tr {
        height: 70px !important;
      }
    }
  }
  .frame{
    .el-dialog__wrapper{
      .el-dialog{
        border-radius: 8px;
      }
      .el-dialog__header{
        border-bottom:1px solid #eaedf5;
        color:#000000;
        font-size: 18px;
        font-weight: bold;
        padding:20px;
      }
      .el-dialog__body{
        padding:30px 0;
      }
      .el-dialog__headerbtn .el-dialog__close{
        color: #666666;

      }
    }
  }
</style>


